//加载公共样式
require('../../assets/css/index.less')

//服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'

let dom = require('../../utils/dom')
const request = require('../../utils/request')

//字体图标
require('../../assets/fonts/iconfont.css')
//加载自己的样式
require('./motionData.less')
//echarts
const echarts = require('echarts')

window.onload = () => {
    const back = document.querySelector('#back')
    const headImg = document.querySelector('#headImg')
    const durationVal = document.querySelector('#durationVal')
    const calorieVal = document.querySelector('#calorieVal')
    const total = document.querySelector('#total')
    const day = document.querySelector('#day')
    const series = document.querySelector('#series')

    back.addEventListener('click', function () {
        history.go(-1)
    })
    //柱状图
    function renderBar() {
        var myChart = echarts.init(document.getElementById('duration'));
        let option = {
            title: {
                text: '近七天运动时长',
                left: 'left'
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar'
                }
            ]
        };

        option && myChart.setOption(option);

    }

    renderBar()
    //饼状图
    function majiaxi() {
        var myChart = echarts.init(document.getElementById('sportsType'));

        option = {
            title: {
                text: '运动分类',
                left: 'left',
                z: 3
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: 60
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {
                            value: 40, name: '跑步', label: {
                                // show: false,
                                position: 'inside',
                                formatter: '{c}%'
                            }
                        },
                        {
                            value: 30, name: '骑行', label: {
                                // show: false,
                                position: 'inside',
                                formatter: '{c}%'
                            }
                        },
                        {
                            value: 30, name: '训练', label: {
                                // show: false,
                                position: 'inside',
                                formatter: '{c}%'
                            }
                        },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);
    }
    majiaxi()
}

